<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        dd{
            cursor: pointer;
        }
    </style>
    <script>
        window.onload = function(){
            var dl = document.getElementsByTagName("dl"),
                div = document.getElementById("div"),
                location = '',
                position = '',
                wage = '';
                function fn(n){
                    var dd = dl[n].getElementsByTagName("dd");
                    for(var i = 0; i < dd.length; i++){
                        dd[i].onclick = function(){
                            switch(n){
                                case 0:
                                location = this.innerHTML + '';
                                break;
                                case 1:
                                position = this.innerHTML + '';
                                break;
                                case 2:
                                wage = this.innerHTML + '';
                                break;
                            }
                            div.innerHTML = location + position + wage;
                        }
                    }
                }
                for(var i = 0; i < dl.length; i++){
                    fn(i);
                }
        }
    </script>
</head>
<body>
    	<dl>
                <dt>地区</dt>
                <dd>东城</dd>
                <dd>西城</dd>
                <dd>朝阳</dd>
                <dd>昌平</dd>
            </dl>
            <dl>
                <dt>职位</dt>
                <dd>美工设计</dd>
                <dd>前端工程师</dd>
                <dd>后台开发</dd>
            </dl>
            <dl>
                <dt>薪资</dt>
                <dd>4000</dd>
                <dd>5000</dd>
                <dd>6000</dd>
            </dl>
            <div id="div"></div>
</body>
</html>